<template>
  <section>
    <!--<tinymce toolbar="image link"></tinymce>-->
    <el-tabs v-model="detailType" v-if="goodsDetails">
      <el-tab-pane label="移动端" name="mobile">
        <editor v-if="goodsDetails" v-model="goodsDetails.find(d=>d.type === 1).detail" v-on:save="saveTinymceBtn" style="padding:5px;"></editor>
        <div class="btnBox" style="">
          <el-button size="mini" type="primary" style="width: 55px;" @click="saveTinymceBtn(goodsDetails.find(d=>d.type === 1),1)">保存</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="PC端" name="pc">
        <editor v-if="goodsDetails" v-model="goodsDetails.find(d=>d.type === 2).detail" v-on:save="saveTinymceBtn" style="padding:5px;"></editor>
        <div class="btnBox" style="">
          <el-button size="mini" type="primary" style="width: 55px;" @click="saveTinymceBtn(goodsDetails.find(d=>d.type === 2),2)">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import editor from '@/common/tinymce'
  import tinymce from '@tinymce/tinymce-vue'
  import errHandler from '@/assets/errHandler'
  export default {
    name: "goodsDetail",
    components:{tinymce,editor},
    props:['goodsDetails'],
    data() {
      return {
        detailType:'mobile'
      }
    },
    created(){
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      saveTinymceBtn(goodsDetail,type){
        console.log('currGoods-------',goodsDetail)
        // if(!this.mallGoods.id){
        //   this.$message({type:'error',message:'请先创建商品！'})
        //   return
        // }
        let data=goodsDetail
        console.log(this.goodsDetails)
        if(goodsDetail.id){
          //保存
          // let data={id:goodsDetail.id,detail:goodsDetail.detail}
          this.updateGoodsDetail(data)
        }else {
          // let data={detail:goodsDetail.detail}
          console.log('看一下参数--------',data)
          // return
          this.createGoodsDetail(data)
        }
      },
      createGoodsDetail(data){
        this.fetch({name:"createGoodsDetail",data})
          .then(res=>{
            this.$message({type:'success',message:'新建成功！'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateGoodsDetail(data){
        this.fetch({name:"updateGoodsDetail",data})
          .then(res=>{
            this.$message({type:'success',message:'更新成功！'})
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
